<template>
  <hr />
  <input type="text" @input="changeInput" :value="textVal" />
  <br>
  <input type="color" :value="colorVal" @input="changeColor" />
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'

const props = defineProps<{
  textVal: string,
  colorVal?: string,
  colorValModifiers?: {
    opacity: boolean
  }
}>()
const emit = defineEmits(['update:textVal', 'update:colorVal'])

const changeInput = (e: Event) => {
  const target = e.target as HTMLInputElement
  emit('update:textVal', target.value)
}
const changeColor = (e: Event) => {
  const target = e.target as HTMLInputElement
  const color = props.colorValModifiers?.opacity ? (target.value) : target.value
  console.log(color)
  emit('update:colorVal', color)
}

</script>

<style lang='scss' scoped>

</style>